<template>
  <ContentWrap :body-style="{ padding: 0 }" class="spuItem">
    <el-row class="w-100%">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-image :fit="'fill'" :src="Item.picUrl || defaultProductImg" />
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="Item.status !== 1">
        <div class="!w-full top-0 pos-absolute">
          <!-- 未激活 -->
          <el-image
            :fit="'scale-down'"
            :src="tobeactivedIcon"
            class="!bg-black"
            style="opacity: 0.4"
            v-if="Item.status == 0"
          />
          <!-- 有欠款 -->
          <el-image
            :fit="'scale-down'"
            :src="debtIcon"
            class="!bg-black"
            style="opacity: 0.4"
            v-if="Item.status == -1"
          />
          <!-- 已停卡 -->
          <el-image
            :fit="'scale-down'"
            :src="stopusingIcon"
            class="!bg-black"
            style="opacity: 0.4"
            v-if="Item.status == 2"
          />
          <!-- 已用尽 -->
          <el-image
            :fit="'scale-down'"
            :src="usupIcon"
            class="!bg-black"
            style="opacity: 0.4"
            v-if="Item.status == 3"
          />
          <!-- 已过期 -->
          <el-image
            :fit="'scale-down'"
            :src="overdueIcon"
            class="!bg-black"
            style="opacity: 0.4"
            v-if="Item.status == 4"
          />
          <!-- 已退款 -->
          <el-image
            :fit="'scale-down'"
            :src="refundIcon"
            class="!bg-black"
            style="opacity: 0.4"
            v-if="Item.status == 5"
          />
          <!-- 换购 -->
          <el-image
            :fit="'scale-down'"
            :src="tradeInIcon"
            class="!bg-black"
            style="opacity: 0.4"
            v-if="Item.status == 6"
          />
          <!-- 转卡 -->
          <el-image
            :fit="'scale-down'"
            :src="makeoverIcon"
            class="!bg-black"
            style="opacity: 0.4"
            v-if="Item.status == 7"
          />
          <!-- 转让 -->
          <el-image
            :fit="'scale-down'"
            :src="zhuanrangIcon"
            class="!bg-black"
            style="opacity: 0.4"
            v-if="Item.status == 8"
          />
          <!-- 退款中 -->
          <el-image
            :fit="'scale-down'"
            :src="inRefundIcon"
            class="!bg-black"
            style="opacity: 0.4"
            v-if="Item.status == 20"
          />
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-text line-clamp="2" class="goods-title custom-text-16 c-[#11192d]! .dark:c-[#fff]!">
          <SpuTag :type="DICT_TYPE.PRODUCT_SPU_TYPE2" :value="Item.skuType" />
          {{ Item.spuName }}
        </el-text>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-text line-clamp="1" truncated>
          <div class="flex flex-row flex-wrap c-[var(--el-color-primary)]">
            {{ Item.leftStatus }} &nbsp;&nbsp;{{ Item.enableStatus }}
          </div>
        </el-text>
      </el-col>
      <el-divider border-style="dashed" class="m-y-0!" />

      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-text line-clamp="1" truncated>
          <div class="flex flex-row flex-wrap">
            {{ Item.properties }}
          </div>
        </el-text>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <slot name="itemButton"> </slot>
      </el-col>
    </el-row>
  </ContentWrap>
</template>
<script setup lang="ts" name="spuItem">
import { onMounted } from 'vue'
import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE } from '@/utils/dict'

import defaultProductImg from '@/assets/imgs/default-product-img.jpg' //默认商品图
import debtIcon from '@/assets/imgs/debt-icon.png' //有欠款
import tobeactivedIcon from '@/assets/imgs/tobeactived-icon.png' //待激活
import makeoverIcon from '@/assets/imgs/makeover-icon.png' //已转卡
import overdueIcon from '@/assets/imgs/overdue-icon.png' //已过期
import refundIcon from '@/assets/imgs/refund-icon.png' //已退款
import stopusingIcon from '@/assets/imgs/stopusing-icon.png' //已停卡
import tradeInIcon from '@/assets/imgs/tradeIn-icon.png' //已换购
import usupIcon from '@/assets/imgs/usup-icon.png' //已用尽
import zhuanrangIcon from '@/assets/imgs/zhuanrang-icon.png' //已转让
import inRefundIcon from '@/assets/imgs/inRefund-icon.png' //退款中
defineProps({
  // 选中的门店列表
  Item: propTypes.object.def({})
})

onMounted(() => {})
</script>
<style lang="scss" scoped>
.spuItem {
  border: 1px solid var(--el-card-bg-color) !important;
  &:hover {
    border: 1px solid var(--el-color-primary) !important;
    padding: 2px;
  }
}
.goods-title {
  font-weight: 500;
  height: 48px;
  line-height: 24px;
}
.goods-price {
  font-weight: 700;
  color: #ff6200;
}

:deep(.el-image) {
  border-radius: 2px;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
:deep(.el-image__inner) {
  position: absolute !important;
}
</style>
